<template>
  <div class="home">
    这里是主页面
  </div>
</template>
<script>

import derDev from '../../utils/scroll.js'

export default {
  // 自定义指令
  directives: {
    sl: derDev, //平滑移动的指令
  },
  data() {
    return {
      startScroll: true,
      defaultOption: {
        step: 0.1,//数值越大速度滚动越快
        limitMoveNum: 10, // 开始无缝滚动的数据量 this.dataList.length
        hoverStop: true, // 是否开启鼠标悬停stop
        direction: 1, // 0向下 1向上 2向左 3向右
        openWatch: true, // 开启数据实时监控刷新dom
        singleHeight: 0, // 单步运动停止的高度(默认值0是无缝不停止的滚动) direction => 0/1
        singleWidth: 0, // 单步运动停止的宽度(默认值0是无缝不停止的滚动) direction => 2/3
        waitTime: 1000, // 单步运动停止的时间(默认值1000ms)
      },
      parkingLotList: [
        {
          name: '总览',
          highLight: true
        },
        {
          name: '西安客整所',
          highLight: false
        },
        {
          name: '宝鸡客整所',
          highLight: false
        },
        {
          name: '安康客整所',
          highLight: false
        },
        {
          name: '检修车',
          highLight: false
        },
        {
          name: '存车场',
          highLight: false
        },
        {
          name: '虚拟',
          highLight: false
        },
      ],
      listData: [
        { content: '标签' }, { content: '标签标签标签' }, { content: '标签' }, { content: '标签标签签' }, { content: '标签' }, { content: '标签' }, { content: '标签' },
        { content: '标签' }, { content: '标签标签' }, { content: '标标签签' }, { content: '标签标签' }, { content: '标签' }, { content: '标签' }, { content: '标签' },
        { content: '标签' }, { content: '标签标签' }, { content: '标标签签' }, { content: '标签标签' }, { content: '标签' }, { content: '标签' }, { content: '标签' },
        { content: '标签' }, { content: '标签标签' }, { content: '标标签签' }, { content: '标签标签' }, { content: '标签' }, { content: '标签' }, { content: '标签' },
      ],
      typesList: [
        { name: '运用(60)', highLight: false },
        { name: '检修(123)', highLight: false },
        { name: '备用(29)', highLight: false },
      ]
    }
  },
  created() {
  },
  computed: {

  },
  methods: {

    searchEleAndScroll() {
      // dom.offsetTop 获取元素到相对父元素的顶部距离
      // dom.offsetLeft 获取元素到相对父元素的左边距离
      let childNode = this.$refs['4-ref'][0];
      // 获取外层滚动盒子dom，控制起滚动
      let Node = this.$refs['car-box'];
      console.log(Node, '这是外层盒子的dom');
      // 具体搜出来的某个元素的dom
      let carDom = document.getElementById('2-car-4');
      console.log(carDom, '这是具体搜出来的某个元素的dom');
      // 这个元素距离左侧父元素的距离  这里要减去一个80 是因为左侧有一个width 为 89px 的盒子
      let leftOffset = carDom.offsetLeft - 86;
      console.log(leftOffset, '这是元素距离左侧父元素的距离');
      // 获取当前元素的父元素，控制父元素的滚动条向左滚动
      // dom.parentNode 返回元素的第一个父节点  也就是最近的父元素
      let firstParent = carDom.parentNode;
      console.log(firstParent, '这是当前元素的父元素');
      // 拿到当前元素后控制向左滚动
      firstParent.scrollIntoView({ block: 'start', inline: 'nearest' });
      firstParent.scrollLeft = leftOffset;

      // 然后根据页面的结构来看，我们要想将当前子元素所在的行滚动到第一列，就需要获取到当前行的Node节点,所以需要再次获取父元素的父节点
      let secondParent = firstParent.parentNode;
      console.log(secondParent, '这是当前元素的父元素父节点');
      // 现在已经拿到当前行的Node节点了，就可以直接获取当前行到上级元素的顶部的距离，然后滚动距离为这个距离就可以实现滚动到第一行的效果
      let topOffset = secondParent.offsetTop;
      console.log(topOffset, '这是当前行到上级元素的顶部的距离');
      // 控制外层盒子滚动
      Node.scrollTop = topOffset;
    },
    changeScroll() {
      if (this.startScroll) {
        this.defaultOption.step = 0;
        this.startScroll = false;
      } else {
        this.defaultOption.step = 0.1
        this.startScroll = true;
      }
    },
    // 点击车位高亮
    handleClick(index, row) {
      this.handleParkingLotHighLight(index);

    },
    handleParkingLotHighLight(index) {
      // 先去除list中所有高亮
      this.parkingLotList.forEach(item => {
        item.highLight = false;
      })
      // 当前点击的元素高亮
      this.parkingLotList[index].highLight = true;
    },
    // 点击类型高亮
    typesClick(index, row) {
      this.handleTypeHighLight(index)
    },

    handleTypeHighLight(index) {
      this.typesList.forEach(item => {
        // 先去除list中所有高亮
        item.highLight = false;
      })
      // 当前点击的元素高亮
      this.typesList[index].highLight = true;
    }
  },
}
</script>
<style scoped lang="scss"> .home {
   height: 100%;
   width: 100%;
   padding: 0 12px;
   box-sizing: border-box;

   .top-container {
     height: 80px;
     width: 100%;
     box-sizing: border-box;
     display: flex;
     flex-direction: column;
     justify-content: space-around;
     align-items: start;
     padding: 8px 0;
     position: relative;

     .scroll-btn {
       position: absolute;
       right: 11px;
       top: 13px;
       padding: 4px 8px;
       border-radius: 4px;
       border: 1px solid #3a3a3b;
       font-size: 13px;
       cursor: pointer;

       &:hover {
         background-color: #5691e4e7;
         color: #fff;
         font-weight: 700;
         opacity: .8;
       }
     }

     .parking-lot {
       display: flex;
       align-items: center;

       img {
         height: 20px;
         width: 20px;
         margin-right: 10px;
       }

       span {
         display: inline-block;
         height: 23px;
         width: auto;
         border-radius: 24px;
         padding: 1px 12px;
         line-height: 19px;
         box-sizing: border-box;
         border: 1px solid #5692e4;
         font-family: "楷体";
         font-weight: 700;
         margin: 0 6px;
         cursor: pointer;
         font-size: 14px;

         &:hover {
           color: #fff;
           background-color: #5691e4e7;
         }
       }
     }

     .types {
       height: auto;

       img {
         height: 20px;
         width: 20px;
         margin-right: 10px;
         vertical-align: middle;
       }

       span {
         display: inline-block;
         padding: 4px 12px;
         border-radius: 4px;
         border: 1px solid #5692e4;
         margin: 0 6px;
         font-family: "楷体";
         font-size: 14px;
         font-weight: 700;

         text-align: center;
         cursor: pointer;

         &:hover {
           color: #fff;
           background-color: #5691e4eb;
         }
       }
     }
   }

   .high-light {
     color: #fff;
     background-color: #5692e4;
   }

   .main-container {
     width: 100%;
     height: calc(100% - 90px);
     display: flex;
     box-sizing: border-box;

     .parking-lot-name {
       height: 100%;
       width: 40px;
       box-sizing: border-box;
       font-family: "楷体";
       margin-right: 10px;

       .car-lot {
         font-size: 20px;
         width: 20px;
         height: auto;
         margin: 40px auto;
         margin-bottom: 0;

         line-height: 27px;
         display: flex;
         flex-direction: column;

       }

       .count {
         margin-top: 4px;
       }
     }

     .car-box {
       height: 100%;
       width: calc(100% - 50px);
       box-sizing: border-box;
       overflow: hidden;
       overflow-y: scroll;
       position: relative;

       // background-color: skyblue;
       .car-list {
         height: 110px;
         width: 100%;
         box-sizing: border-box;
         padding: 5px 0;
         box-sizing: border-box;
         margin-bottom: 8px;
         display: flex;

         .group-name {
           height: 100%;
           width: 80px;
           border-radius: 8px;
           background-color: #267fdf;
           display: flex;
           align-items: center;
           justify-content: center;
           color: #fff;

         }

         .cars {
           height: 100%;
           width: calc(100% - 80px);
           box-sizing: border-box;
           padding-left: 4px;
           display: flex;
           align-items: center;
           overflow: scroll hidden;
           flex-wrap: nowrap;

           .car {
             height: 80%;
             width: 144px;
             border-radius: 4px;
             background-color: #38846a;
             font-family: "楷体";
             color: #fff;
             box-sizing: border-box;
             display: flex;
             margin-right: 9px;
             box-sizing: border-box;
             flex-direction: column;
             flex-shrink: 0;
             position: relative;
             transition: 1s ease-out;

             .tool {
               position: absolute;
               left: 83%;
               top: 6px
             }

             .car-name {
               display: block;
               height: 26px;
               font-size: 30px;
             }

             .car-foot {
               display: block;
               height: calc(100% - 20px);
               width: 100%;
               box-sizing: border-box;
               padding: 4px 2px;
               overflow: hidden;
               line-height: 20px;

               .car-label {
                 padding: 2px 4px;
                 border-radius: 10px;
                 background-color: skyblue;
                 font-size: 12px;
                 margin-right: 4px;
                 color: black;
                 overflow: hidden;
               }
             }
           }
         }

         /*滚动条里面轨道*/
         .cars::-webkit-scrollbar-track {
           -webkit-box-shadow: inset 0 0 6px transparent;
           background-color: transparent;
           cursor: pointer;
         }

         /*定义滚动条整体的样式*/
         .cars::-webkit-scrollbar {
           height: 8px;
           background-color: transparent;
           cursor: pointer;
         }

         /*滚动条的样式*/
         .cars::-webkit-scrollbar-thumb {
           height: 20px;
           cursor: pointer;
           border-radius: 8px;
           background-image: -webkit-gradient(linear,
               left bottom,
               left top,
               color-stop(0.2, rgb(133, 142, 162)),
             );
         }
       }

     }

     /*滚动条里面轨道*/
     .car-box::-webkit-scrollbar-track {
       -webkit-box-shadow: inset 0 0 6px transparent;
       background-color: transparent
     }

     /*定义滚动条整体的样式*/
     .car-box::-webkit-scrollbar {
       height: 8px;
       width: 5px;
       background-color: transparent;
     }

     /*滚动条的样式*/
     .car-box::-webkit-scrollbar-thumb {
       height: 20px;
       border-radius: 8px;
       background-image: -webkit-gradient(linear,
           left bottom,
           left top,
           color-stop(0.2, rgb(193, 206, 233)),
         );
     }

     ::v-deep .el-scrollbar__wrap {
       overflow: hidden;
       overflow-y: scroll;
       height: 100%;
     }
   }
 }

 .warp {
   width: 100%;
   height: 100%;
   overflow: hidden;

 }</style>
<style> .el-popover .car-label {
   padding: 2px 4px;
   border-radius: 10px;
   background-color: skyblue;
   font-size: 12px;
   margin: 2px;
   display: block;
   height: 20px;
   font-size: 12px;
   color: black;
   overflow: hidden;
 }

 .el-popover {
   background: rgba(128, 128, 128, 0.956);
   height: auto;
 }

 .el-popover .tip-tool {
   display: flex;
   height: auto;
   justify-content: space-around;
   width: 250px;
   flex-wrap: wrap;
   font-size: 12px;
   font-family: "楷体";

 }</style>
